<template>
	<view>
		<view class="header" id="header">
			<view class="navigation">
				<u-icon name="scan" size="28" @click="qRCodeAdd"></u-icon>
				<u-search :show-action="false" v-model="searchDeviceNo" placeholder="请输入设备号" class="input"
					bgColor="rgb(247, 248, 247)" :animation="true" margin="20rpx" searchIconShow="true"
					showAction="true" @click="clickSearch()" @clickIcon="clickSearch()" @search="clickSearch()"
					@custom="clickSearch()"></u-search>
				<u-icon name="plus" size="10" bold="true" label="添加设备" color="rgb(96,114,255)"
					labelColor="rgb(96,114,255)" labelSize="26rpx"
					@click="nav('/pages-device/facility-norm/facility-norm')"></u-icon>
			</view>

			<view class="stats">
				<text :class="networkType == 0 ? 'optTab' : 'tab'" @click="networkClick(0)">全部（{{totalDevice}}）</text>
				<text :class="networkType == 1 ? 'optTab' : 'tab'" @click="networkClick(1)">在线（{{onlineCount}}）</text>
				<text :class="networkType == 2 ? 'optTab' : 'tab'" @click="networkClick(2)">离线（{{offlineCount}}）</text>
			</view>

			<view class="reply-operate">
				<view class="operate" @click.stop="selectStore()">
					<view class="title">{{storeName}}</view>
					<view>
						<u-icon name="arrow-down" color="rgba(0, 0, 0, 0.5)" size="11"></u-icon>
					</view>
				</view>

				<view class="operate  operate-right" @click.stop="!params.isVendingMachine?selectDeviceType():null">
					<view class="title">{{deviceType}}</view>
					<view v-if="!params.isVendingMachine">
						<u-icon name="arrow-down" color="rgba(0, 0, 0, 0.5)" size="11"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<discountPackage></discountPackage>

		<device-type ref="deviceType" @deviceTypeData="getDeviceType"></device-type>

		<store ref="store" @storeData="getStore"></store>
		<scroll-view scroll-y :style="{ height: height + 'px'}" @scrolltolower="reachBottom">
			<view class="content" :class="{popupShow:show}">
				<u-collapse :border="false" @change="change" :value="openByDefault" ref="collapseView">
					<view class="session">
						<view v-for="(item, index) of deviceList" :key="index"
							:class="expandStateList[index].status=='open'?'open-color session-box':'session-box'">
							<!-- 离线 ${item.offlineCount} 台 -->
							<u-collapse-item :name="index" :title="`${item.storeName}`"
								:value="`离线 ${item.offlineCount}/${item.totalDevice} 台`" :border="false">
								<!--								<view @click="batchSet(item)" class="batch-set">批量设置</view>-->
								<view class="list u-flex-row"
									@click="openThePopup(deviceItem.id,index,deviceIndex,deviceItem.deviceTypeId,deviceItem.deviceNo,deviceItem.isBluetooth)"
									v-for="(deviceItem, deviceIndex) of item.deviceList" :key="deviceIndex">
									<view class="item-left">

										<view class="row-top">

											<view class="item-name">
												<text class="u-font-sm">
													<text v-if="deviceItem.alias">{{deviceItem.alias}}号_</text>
													<text>{{deviceItem.deviceTypeName}}</text>
												</text>
												<view>{{deviceItem.deviceNo}}</view>
												<text class="u-font-sm"
													v-if="deviceItem.remarkName != null && deviceItem.remarkName != ''">({{deviceItem.remarkName}})</text>
												<view v-if="deviceItem.deviceTypeId != $deviceTypeEnum.MULTI_SPLIT">
													<view
														v-if="deviceItem.networkIntensity > 0 && !deviceItem.pulseSwitchState && !$u.test.isEmpty(deviceItem.productId)"
														class="equipment">串口</view>
													<view
														v-else-if="deviceItem.networkIntensity >= 0 && !deviceItem.pulseSwitchState"
														class="equipment equipment2">串口</view>
													<view
														v-if="deviceItem.networkIntensity > 0 && deviceItem.pulseSwitchState"
														class="equipment">脉冲</view>
													<view
														v-else-if="deviceItem.networkIntensity >= 0 && deviceItem.pulseSwitchState"
														class="equipment equipment2">脉冲</view>
												</view>
												<view class="deactivate" v-if="deviceItem.status == 0">已禁用</view>
												<view class="u-font-sm"
													v-if="deviceItem.isInsertCoin == 1 && !deviceItem.drDeviceId">
													（{{deviceItem.rateEach}}{{deviceItem.measuringUnit?deviceItem.measuringUnit:''}}/次）
												</view>

											</view>

										</view>
										<view class="u-flex">
											<view class="right-arrow" v-if="!deviceItem.isBluetooth">
												<signal :level="deviceItem.networkIntensity"></signal>
											</view>
											<image class="bluetooth-image" v-else
												:src="staticFileUrl + '/image/my/bluetooth.svg'"></image>
											<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="16" />
										</view>


										<view v-if="deviceItem.giftType == 1" class="giftType">
											<view class="drDeviceId" style="width: 642rpx;" v-if="deviceItem.deviceTypeId == $deviceTypeEnum.VENDING_MACHINE
											|| deviceItem.deviceTypeId == $deviceTypeEnum.SCREEN_VENDING_MACHINE
											|| deviceItem.deviceTypeId == $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE
											|| deviceItem.deviceTypeId == $deviceTypeEnum.BLEND_VENDING_MACHINE
											">
												<view class="view-drDeviceId view-drDeviceId-width">
													<view class="drDeviceId-num">
														{{deviceItem.freightLaneCount}}条
													</view>
													<view class="drDeviceId-name">货道总数</view>
												</view>
												<view class="view-drDeviceId view-drDeviceId-width">
													<view class="drDeviceId-num">
														{{deviceItem.capacityCount}}个
													</view>
													<view class="drDeviceId-name">总容量</view>
												</view>
												<view class="view-drDeviceId view-drDeviceId-width">
													<view class="drDeviceId-num">
														{{deviceItem.scarceStock?deviceItem.scarceStock:0}}个
													</view>
													<view class="drDeviceId-name">缺货</view>
												</view>
												<view class="view-drDeviceId view-drDeviceId-width">
													<view class="drDeviceId-num">
														{{deviceItem.stockCount?deviceItem.stockCount:0}}个
													</view>
													<view class="drDeviceId-name">现有库存</view>
												</view>
											</view>

											<view v-else-if="deviceItem.deviceTypeId != $deviceTypeEnum.VENDING_MACHINE
											&& deviceItem.deviceTypeId != $deviceTypeEnum.SCREEN_VENDING_MACHINE
											&& deviceItem.deviceTypeId != $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE
											&& deviceItem.deviceTypeId != $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE
											&& deviceItem.deviceTypeId != $deviceTypeEnum.GASHAPON_MACHINE
											&& deviceItem.deviceTypeId != $deviceTypeEnum.MULTI_SPLIT">
												<view
													v-for="(displayRackItem, displayRackItemIndex) of deviceItem.displayRackItemVoList"
													:key="displayRackItemIndex" class="giftType u-m-t-26">
													<view class="commodity-img u-flex-content-center u-m-r-10">
														<template v-if="displayRackItem.commodityId">
															<image
																v-if="displayRackItem.fileName != null && displayRackItem.fileName != ''"
																:src="imgURL + displayRackItem.fileName"
																class="pictures-of-goods">
															</image>
															<image v-else
																:src="staticFileUrl+'/image/common/default_goods_image.svg'"
																class="pictures-of-goods">
															</image>
														</template>
														<view v-else class="wei-ban-ding"
															@click.stop="weiBanDin(deviceItem)">
															<u-icon name="plus" color="rgba(0, 0, 0, 0.5)"
																size="26rpx" />
															<view class="wei-bang-ding-text">绑定礼品</view>
														</view>
													</view>

													<view class="drDeviceId">
														<view class="view-drDeviceId">
															<view class="drDeviceId-num">
																{{displayRackItem.rateEach}}{{deviceItem.measuringUnit?deviceItem.measuringUnit:''}}/次
															</view>
															<view class="drDeviceId-name">单价</view>
														</view>
														<view class="view-drDeviceId">
															<view class="drDeviceId-num">
																{{displayRackItem.existStock?displayRackItem.existStock:0}}个
															</view>
															<view class="drDeviceId-name">展柜</view>
														</view>
														<view class="view-drDeviceId">
															<view class="drDeviceId-num">
																{{displayRackItem.reserveStock?displayRackItem.reserveStock:0}}个
															</view>
															<view class="drDeviceId-name">储物柜</view>
														</view>
													</view>
												</view>
											</view>

											<view
												v-else-if="deviceItem.deviceTypeId == $deviceTypeEnum.GASHAPON_MACHINE || deviceItem.deviceTypeId == $deviceTypeEnum.MULTI_SPLIT">
												<view
													v-for="(displayRackItem, displayRackItemIndex) of deviceItem.displayRackItemVoList"
													:key="displayRackItemIndex" class="u-m-t-26">
													<view class="u-flex-row u-row-start">
														<text>{{displayRackItem.locationName}}：</text>
														<text v-if="deviceItem.deviceTypeId == $deviceTypeEnum.MULTI_SPLIT" class="u-m-r-20">
															<text v-if="deviceItem.networkIntensity > 0 && !deviceItem.pulseSwitchState && !$u.test.isEmpty(displayRackItem.productId)"
																class="equipment">串口</text>
															<text v-else-if="deviceItem.networkIntensity >= 0 && !deviceItem.pulseSwitchState"
																class="equipment equipment2">串口</text>
														</text>
														<text v-if="displayRackItem.commodityName">
															<text>{{displayRackItem.commodityName}}</text>
															<text v-if="displayRackItem.commodityName">，</text>
														</text>
														<text
															v-if="displayRackItem.driRateEach">{{displayRackItem.driRateEach}}{{deviceItem.measuringUnit?deviceItem.measuringUnit:''}}/次</text>
														<text
															v-if="displayRackItem.retailPrice && deviceItem.deviceTypeId != $deviceTypeEnum.MULTI_SPLIT">，{{displayRackItem.retailPrice}}元/次</text>
													</view>
													<view class="giftType">
														<view class="commodity-img u-flex-content-center u-m-r-10">
															<template v-if="displayRackItem.commodityId">
																<image
																	v-if="displayRackItem.fileName != null && displayRackItem.fileName != ''"
																	:src="imgURL + displayRackItem.fileName"
																	class="pictures-of-goods">
																</image>
																<image v-else
																	:src="staticFileUrl+'/image/common/default_goods_image.svg'"
																	class="pictures-of-goods">
																</image>
															</template>
															<view v-else class="wei-ban-ding"
																@click.stop="weiBanDin(deviceItem)">
																<u-icon name="plus" color="rgba(0, 0, 0, 0.5)"
																	size="26rpx" />
																<view class="wei-bang-ding-text">绑定礼品</view>
															</view>
														</view>

														<view class="drDeviceId">
															<view class="view-drDeviceId-egg">
																<view class="drDeviceId-num">
																	{{displayRackItem.existStock?displayRackItem.existStock:0}}个
																</view>
																<view class="drDeviceId-name">展柜</view>
															</view>
															<view class="view-drDeviceId-egg">
																<view class="drDeviceId-num">
																	{{displayRackItem.reserveStock?displayRackItem.reserveStock:0}}个
																</view>
																<view class="drDeviceId-name">储物柜</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<u-empty v-if="item.deviceList.length == 0" text="暂无设备" mode="list"
									icon="http://cdn.uviewui.com/uview/empty/list.png" />

							</u-collapse-item>
							<view class="border"></view>
						</view>
					</view>

					<u-empty v-if="deviceList.length == 0" text="暂无设备" mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png" />
				</u-collapse>

				<u-loadmore v-if="deviceList.length > 0" :status="loadStatus" bgColor="#f2f2f2" height="70rpx"
					line=true> </u-loadmore>
			</view>

		</scroll-view>
		<deviceBulletBox :key="key" @change="closeChange()" ref="deviceBulletBox"
			:dId="deviceId"></deviceBulletBox>
		<view class="footer" id="footer">
			<deviceManageTabbar ref="deviceManageTabbar"></deviceManageTabbar>
		</view>

		<merchantStore ref="merchantStoreRef" @selectBatchOperation="selectBatchOperation"></merchantStore>
	</view>
</template>

<script>
	import store from '@/components/store/store.vue';
	import deviceType from '@/components/device-type/device-type.vue';
	import signal from '@/components/signal/signal.vue'
	import deviceBulletBox from '@/pages-device/device-detail/device-bullet-box.vue'
	import merchantStore from '@/components/merchant-store-select/merchant-store-select.vue'
	import deviceManageTabbar from '@/pages-device/device-manage/device-manage-tabbar.vue'

	export default {
		components: {
			deviceType,
			signal,
			store,
			deviceBulletBox,
			merchantStore,
			deviceManageTabbar,
		},
		data() {
			return {
				imgURL: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,
				nextStepBtnCustomStyle: {
					width: '688rpx',
					height: '88rpx',
					background: 'rgb(96,114,255)',
					borderRadius: '120px',
					color: '#fff',
				},
				key: 0,
				deviceIndex: 0,
				storeIndex: 0,
				deviceId: 0,
				show: false,
				openByDefault: [],
				expandStateList: [],
				height: 0,
				// 滑动提示
				loadStatus: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',

				deviceList: [],
				storeName: '设备场地',
				deviceType: '设备类型',
				batchOperation: '批量操作',

				// 在线数量
				onlineCount: 0,
				// 离线数量
				offlineCount: 0,
				// 设备总台数
				totalDevice: 0,

				networkType: 0,
				$deviceTypeEnum: this.$deviceTypeEnum,
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					merchantStoreId: '',
					networkIntensity: -1,
					deviceTypeId: '',
					deviceNo: '',
					//是否售货机
					isVendingMachine: false,
				},
				batchSetShow: false,
				searchDeviceNo: '',
				type: 0,
			}
		},
		onReady() {
			this.getPomHeight()
		},
		// 下拉事件
		onPullDownRefresh() {
			this.searchDeviceNo = "";
			this.params.deviceNo = "";
			this.overloadData('refresh');
		},
		onLoad(options) {
			// console.log(options.deviceNo, "options.deviceNo")
			if (options.deviceNo) {
				this.params.deviceNo = options.deviceNo;
				this.searchDeviceNo = options.deviceNo;
			}
			if (options.type) {
				this.type = options.type
				console.log(this.type)
			}
			if (options.isVendingMachine) {
				this.params.isVendingMachine = options.isVendingMachine;
				this.deviceType = "售货机"
			}
			this.findAllDeviceByConditionAndPage("");
		},
		onShow() {
			// this.deviceList = []
			//货道管理蓝牙版 断开蓝牙连接
			this.$bluetooth.closeBluetoothAdapter();
			// this.findAllDeviceByConditionAndPage();
			this.$nextTick(() => {
				this.$refs.deviceManageTabbar.Load();
			})
		},
		methods: {
			reachBottom() {
				if (this.params.pageNum >= this.params.totalPage) {
					return;
				};
				this.loadStatus = 'loading';
				this.params.pageNum++;
				console.log("到底部了:", this.params.pageNum);
				this.findAllDeviceByConditionAndPage();
			},
			//批量设置弹框
			batchSet(data) {
				this.batchSetShow = true;
				this.$refs.siteBatchset.init(this.batchSetShow, data);
			},
			moveHandle() {

			},
			closeChange(e) {
				// this.$forceUpdate()
				this.show = e;
				this.overloadData();
			},
			closeShow() {
				this.show = false;
				this.$refs.deviceBulletBox.clear();
			},
			reLoadDeviceBulletBox() {
				this.$refs.deviceBulletBox.init(this.deviceId);
			},
			nav(u) {
				uni.navigateTo({
					url: u
				});
			},
			//未绑定礼品
			weiBanDin(data) {
				this.deviceId = data.id;
				this.$u.route('/pages-device/twisted-egg/twisted-egg', {
					from: 'device-detail',
					deviceId: data.id,
					deviceTypeId: data.deviceTypeId,
				});
			},
			openThePopup(deviceId, storeIndex, deviceIndex, deviceTypeId, deviceNo, isBluetooth) {
				// this.$forceUpdate()
				// this.key=this.key+1;
				// this.show = true;
				this.deviceId = deviceId;

				if ((deviceTypeId == this.$deviceTypeEnum.VENDING_MACHINE ||
						deviceTypeId == this.$deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE ||
						deviceTypeId == this.$deviceTypeEnum.BLEND_VENDING_MACHINE) && this.type == 5) {
					uni.navigateTo({
						url: '/pages-vending-machine/restock/devices-restock?id=' + deviceId
					})
				} else if ((deviceTypeId == this.$deviceTypeEnum.VENDING_MACHINE ||
						deviceTypeId == this.$deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE ||
						deviceTypeId == this.$deviceTypeEnum.BLEND_VENDING_MACHINE) && this.type == 6) {
					uni.navigateTo({
						url: '/pages-vending-machine/channel-management/channel-management?id=' + deviceId +
							'&deviceNo=' + deviceNo + '&isBluetooth=' + isBluetooth
					})
				} else {
					this.storeIndex = storeIndex;
					this.deviceIndex = deviceIndex;
					// this.show = true;
					this.$refs.deviceBulletBox.init(deviceId);
				}
			},
			foldClick(item, index) {
				this.deviceList[index].check = !this.deviceList[index].check
				this.$forceUpdate();
				// console.log('this.deviceList[index].check',this.deviceList[index].check)
			},
			// 根据设备号精确查找
			searchDevice() {
				// this.show = false;
				this.params.deviceNo = this.searchDeviceNo;
				this.overloadData();
			},

			// 重新刷数据
			overloadData(type) {
				this.load(type)
			},
			load(type) {
				this.deviceList = [];
				this.params.pageNum = 1;
				this.params.totalPage = 1;
				this.findAllDeviceByConditionAndPage(type);
			},
			findAllDeviceByConditionAndPage(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('device.findAllDeviceByConditionAndPage', this.params)
					.then(res => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						if (res.status == 0) {
							this.params.pageNum = res.data.pageNum;
							this.params.totalPage = res.data.pages;
							this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
							if (this.params.pageNum >= res.data.pages) {
								this.loadStatus = 'nomore';
							}
							this.deviceList = [...this.deviceList, ...res.data.list]; //合并数组
							//统计被禁用的设备号码数量
							this.deviceList.forEach(item => {
								let disDevice = 0;
								item.deviceList.forEach(ite => {
									if (ite.status == 0) {
										disDevice++
									}
								})
								item['typeDisable'] = item.totalDevice == disDevice ? 0 : 1
							})
							for (let i = 0; i < this.deviceList.length; i++) {
								if (this.deviceList[i].deviceList.length > 0) {
									let expand = {
										status: 'open',
									}
									this.deviceList[i].check = true
									this.expandStateList[i] = expand;
									this.openByDefault = this.openByDefault.concat(i)
								} else {
									this.deviceList[i].check = false
								}
							}
							// console.log('expandStateList',this.expandStateList)
							// console.log('deviceList',this.deviceList)
							this.findStatistics();
							uni.hideLoading();
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.data.msg);
						}
					})
					.catch(() => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						uni.hideLoading();
					});
			},

			// 统计设备状态数量
			findStatistics() {
				this.$api('device.findStatisticsDevice', this.params)
					.then(res => {
						if (res.status == 0) {
							this.offlineCount = res.data.offlineCount;
							this.onlineCount = res.data.onlineCount;
							this.totalDevice = res.data.totalDevice;
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.data.msg);
						}
					})
			},

			clickSearch() {
				this.params.deviceNo = this.searchDeviceNo;
				this.overloadData();
			},

			networkClick(index) {
				this.networkType = index;
				this.params.networkIntensity = index;
				this.params.deviceNo = this.searchDeviceNo;
				this.overloadData();
			},


			// 选择设备类型
			selectDeviceType() {
				this.$refs.deviceType.init(null, true, this.params.deviceTypeId)
			},

			getDeviceType(data) {
				this.deviceType = data.label;
				this.params.deviceTypeId = data.value;
				this.overloadData();
			},

			selectStore() {
				this.$refs.store.init(true)
			},

			getStore(data) {
				if (data.value) {
					this.storeName = data.label;
					this.params.merchantStoreId = data.value;
					this.overloadData();
				}
			},
			getPomHeight() {
				this.$nextTick(() => {
					setTimeout(() => {
						let query = wx.createSelectorQuery().in(this)
						query.select('#header').boundingClientRect()
						query.select('#footer').boundingClientRect()
						query.exec(res => {
							let windowHeight = wx.getSystemInfoSync().windowHeight
							this.height = windowHeight;
							console.log(res)
							for (var i = 0; i < res.length; i++) {
								this.height -= res[i].height;
							}
						})
					}, 1000)
				})
			},
			// 调用微信扫一扫
			qRCodeAdd() {

				uni.showLoading({
					title: "正在调起...",
					mask: true
				})

				var that = this;
				uni.scanCode({
					success: function(res) {
						uni.hideLoading();
						let array = res.result.split("deviceNo/");

						let deviceNo = null;
						if (array.length != 2) {
							const params = that.$helpers.getUrlParams(res.result);
							if (params.d) {
								deviceNo = params.d;
							} else {
								getApp().err('二维码不规范_1：' + res.result);
								return;
							}
						} else {
							// 将扫一扫的结果转化成int类型
							try {
								deviceNo = array[1];
							} catch (e) {
								// console.log("-----转化设备号捕获到异常-------" + e)
								getApp().err('转化设备号捕获到异常：' + e);
								return;
							}
						}

						if (deviceNo == null || deviceNo == '') {
							// console.log("------转化结果有误------" + deviceNo)
							that.$helpers.toast('转化结果有误：' + deviceNo);
							return;
						}
						// console.log("------转化成功------" + deviceNo)
						that.searchDeviceNo = deviceNo;
						that.searchDevice();
					},
					fail: function() {
						uni.hideLoading();
					}
				});
			},

			selectBatchOperation(merchantStore) {
				uni.navigateTo({
					url: '/pages-device/batch-operation/batch-operation?merchantStoreId=' + merchantStore.id,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.open-color {
		/deep/ .u-cell__body {
			border-radius: 20rpx 20rpx 0 0;
			background-color: #6072FF;
		}

		/deep/ .uicon-arrow-right,
		/deep/ .u-cell__value,
		/deep/ .u-cell__title-text {
			color: rgb(255, 255, 255);
		}
	}

	.store-color {
		background: #3170ff;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx 28rpx;
	}

	.pictures-of-goods {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.bottom-container {
		position: relative;
		min-height: 100vh;
	}

	.popup {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/deep/ .u-cell__value {
		font-size: 20rpx !important;
		margin-left: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		// width: 100%;
		// background-color: white;
		// padding-bottom: 30rpx;
		// padding-top: 15rpx;
	}

	.footbtn {
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 40rpx 0 60rpx 0;
		flex-direction: row;
		border-top: 1rpx solid #9e9e9e26;
		justify-content: space-around;
		z-index: 1;
		display: flex;

		.footbtn-box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.footbtn-text {
			margin-top: 10rpx;
			font-size: 18rpx;
			color: rgb(176, 176, 176);
		}

		.bottom-image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.header {
		width: 100%;

		background-color: rgb(255, 255, 255);

		.navigation {
			margin: 0rpx 24rpx 0rpx 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.stats {
			margin-top: 25rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			text {
				margin: 0 24rpx 0 22rpx;
				width: 206rpx;
				height: 70rpx;
				font-size: 26rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.optTab {
				background-color: rgb(96, 114, 255);
				color: $uni-text-color-inverse;
			}

			.tab {
				background-color: rgb(244, 247, 255);
				color: rgba(0, 0, 0, 0.7);
			}
		}

		.reply-operate {
			padding: 27rpx 0 22rpx 24rpx;
			color: rgba(13, 13, 13, 0.5);
			display: flex;
			flex-direction: row;
			font-size: 26rpx;

			.operate {
				display: flex;
				align-items: center;

				.title {
					margin-right: 10rpx;
				}
			}

			.operate-right {
				padding-left: 100rpx;
			}

			.operate-m-right {
				margin-left: 100rpx;
			}

			.reply-add {
				margin-left: 9rpx;
			}

			.sync {
				color: rgba(13, 13, 13, 0.5);
			}
		}
	}


	.content {
		margin-top: 22rpx;
		width: 100%;
		background: #F2F2F2;

		.session {
			//background-color: white;

			font-size: 26rpx;
			padding: 0 24rpx;

			.right-arrow {
				margin-right: 15rpx;
			}

			.bluetooth-image {
				margin-right: 15rpx;
				width: 40rpx;
				height: 40rpx
			}

			.device {
				margin-left: 5rpx;
			}

			.session-box {
				border-radius: 20rpx;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;

				/deep/ .u-cell__body {
					padding: 40rpx 28rpx !important;
				}

				.equipment {
					color: rgb(7, 213, 176);
					margin-left: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					width: 60rpx;
					height: 30rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(7, 213, 176);
					border-radius: 6rpx;
				}

				.deactivate {
					font-size: 22rpx;
					margin-left: 8rpx;
					border: 1rpx solid rgb(255, 77, 79);
					color: rgb(255, 77, 79);
					border-radius: 6rpx;
					box-sizing: border-box;
					width: 80rpx;
					height: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.equipment2 {
					border: 1rpx solid #c8c7cc;
					background-color: #f4faff;
					color: rgba(0, 0, 0, 0.7)
				}

				.item-name {
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 0.7);
					flex-wrap: wrap;
				}

				.showcase {
					color: rgba(0, 0, 0, 0.5);
					font-size: 24rpx;
				}

				.batch-set {
					text-align: right;
					color: #6072FF;
				}

				.list {
					line-height: 60rpx;
					//background: rgb(244, 250, 255);
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 26rpx 0rpx;

					.item-left {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						flex-wrap: wrap;

						.row-top {
							display: flex;
							width: 535rpx;

							.u-font-xl {
								font-weight: bold;
							}

							.u-margin-left-20 {
								color: black;
							}

						}

						.giftType {
							display: flex;
							justify-content: space-between;

							.commodity-img {
								width: 100rpx;
								height: 100rpx;
								background-color: rgb(246, 246, 246);
								border-radius: 8rpx;

								.wei-ban-ding {
									width: 80rpx;
									height: 80rpx;

									/deep/ .u-icon {
										justify-content: center;
									}

									.wei-bang-ding-text {
										color: rgba(0, 0, 0, 0.5);
										font-size: 20rpx;
									}
								}
							}

							.drDeviceId {
								width: 530rpx;
								display: flex;
								justify-content: space-between;

								.view-drDeviceId,
								.view-drDeviceId-egg {
									// margin: 6rpx;
									border-radius: 8rpx;
									width: 170rpx;
									background-color: rgb(246, 246, 246);
									padding: 10rpx;
									height: 100rpx;
									box-sizing: border-box;

									.drDeviceId-num,
									.drDeviceId-name {
										line-height: 40rpx;
									}

									.drDeviceId-num {
										font-size: 24rpx;
										color: rgba(0, 0, 0, 0.8);
									}

									.drDeviceId-name {
										font-size: 20rpx;
										color: rgba(0, 0, 0, 0.5);
									}
								}

								.view-drDeviceId-width {
									width: 153rpx;
								}

								.view-drDeviceId-egg {
									width: 260rpx;
								}
							}
						}

						.row-bottom {

							display: flex;
							justify-content: space-between;
						}
					}
				}
			}

			.border {
				margin-left: 25rpx;
				margin-right: 25rpx;
				border: 1px solid rgba(0, 0, 0, 0.06);
			}

			/deep/ .u-empty {
				padding-bottom: 20rpx;
			}
		}
	}
</style>
